<template>
	<view class="fenlei">
		<!-- 顶部固定栏 -->
		<view class="titlesHead">
			<view class="iconfont icon-fangxiang-xiangzuo icon" @click="yun"></view>
			<view class="titname"> 乐 居 </view>
			<view class="titRight"></view>
		</view>
		<view class="zhanwei">静安阿达</view>
		<!-- 横向导航栏 -->
		<view class="navigation">
			<view class="avigrap" @click="dianji(index)" v-for="(item,index) in tabList" :key="item.id">
				<view :class="index == xfqyyds? 'red' : ''">
					{{item.name}}
				</view>
				<view class="iconBox" v-if="index == 1 || index == 2">
					<view class="iconfont icon-fangxiang-xiangshang" :class="item.zhuangtai == 'up'?'red':''"></view>
					<view class="iconfont icon-fangxiang-xiangxia" :class="item.zhuangtai == 'down'?'red':''"></view>
				</view>
			</view>
		</view>
		<view class="zhan">静安阿达</view>
		<!-- 商品列表 -->
		<view class="init">
			<view class="page" v-for="item in fenIDList" :key="item.id">
				<image :src="item.pic" mode="" @click="gouGoods(item.id)"></image>
				<view class="fenwen">
					<view class="shang">
						{{item.name}}
					</view>
					<view class="xia">
						<view class="jiage">
							$ {{item.price}} 元
						</view>
						<view class="shangjia">
							四岁
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		fenID
	} from '@/api/fenlei/fenlei.js'
	export default {
		name: "FenXiang",
		data() {
			return {
				start: 1, // 默认第一页数据，上拉或者下拉都要让这个页数增加
				total: 0, // 总共几条数据
				shoID: '',
				isDesc: 0,  // 排序默认值   0 降序   1 升序
				sortBy:'',  // 按照什么来排序，默认空字符串
				xfqyyds: 0,
				fenIDList: [],
				tabList: [{
						id: 1,
						name: '新品',
						zhuangtai: 'defalt', // 当前状态有三种  defalt 默认状态 up 向上状态 don 向下状态
					},
					{
						id: 2,
						name: '销量',
						zhuangtai: 'defalt', // 当前状态有三种  defalt 默认状态 up 向上状态 don 向下状态
					}, {
						id: 3,
						name: '价格',
						zhuangtai: 'defalt', // 当前状态有三种  defalt 默认状态 up 向上状态 don 向下状态
					}, {
						id: 4,
						name: '筛选',
						zhuangtai: 'defalt', // 当前状态有三种  defalt 默认状态 up 向上状态 don 向下状态
					}
				]
			};
		},
		computed: {

		},
		onPullDownRefresh() {
			// 下拉刷新函数  onPullDownRefresh()
			//  下拉后就需要重新获取数据
			//  刷新的话 就需要 页数重新开始   数组也要重新为 空，不然数组长度会增肌，那样写的判断条数就没有意义了
			this.start = 1;
			this.fenIDList = [];
		    // 根据数据总条数 来 比较 请求过来的数据总条数 来判断是否要发送请求
		    if (this.total > this.fenIDList.length) {
		    	this.iniltList()
				
		    }
		},
		onReachBottom() {
			// 上拉加载函数 onReachBottom（）
			//  快要上拉到底的时候触发请求数据接口函数  重新获取数据
			//  页数要自增一下，请求不同页数
			this.start++;
			if( this.total > this.fenIDList.length ){
				
				this.iniltList()
			}
		},
		methods: {
			// 点击跳转 商品详情页  
			gouGoods(id){
				uni.navigateTo({
					url:`/pages/goods/goods?id=${id}`
				})
			},
			//点击返回上一页
			yun() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 点击哪个哪个就变红
			dianji(idx) {
				this.xfqyyds = idx;
				// 切换 导航栏上面的选项，粗腰重新重置一下数组，不然 那个数据数组一直在增加   页数也要重置
				this.fenIDList = [];
				this.start = 1;

				this.tabList.forEach((ele, index) => {
					if (idx !== index) {
						// 如果 传过来的 idx 不等于 index下标 就重置状态样式
						ele.zhuangtai = 'defalt'
					}
				})
				if( this.tabList[idx].name === '价格'  ){
					this.sortBy = 'price'
				} else if(this.tabList[idx].name === '销量'){
					this.sortBy = 'sale'
				}

				if (this.tabList[idx].zhuangtai == 'defalt') {
					this.tabList[idx].zhuangtai = 'up'
					//   排序重新赋值   1 升序
					this.isDesc = 1  
				} else if (this.tabList[idx].zhuangtai == 'up') {
					this.tabList[idx].zhuangtai = 'down'
					//   排序重新赋值   0   降序
					this.isDesc = 0
				} else if (this.tabList[idx].zhuangtai == 'down') {
					this.tabList[idx].zhuangtai = 'up'
					//   排序重新赋值   1 升序
					this.isDesc = 1 
				}
				this.iniltList()
			},
			// 获取商品列表
			iniltList() {
				fenID(this.start, 5, {
					"categoryId": this.shoID,
					"isDesc": this.isDesc,
					"sortBy": this.sortBy
				}).then(res => {
					console.log(res)
					this.fenIDList.push(...res.data.data.rows)
					this.total = res.data.data.total
					uni.stopPullDownRefresh();
				})
			}
		},
		onLoad(options) {

			console.log(options.id)
			this.shoID = options.id
			this.iniltList()
		},
	};
</script>

<style lang="less" scoped>
	.fenlei {
		background-color: #f4e8ab;
		height: 100vh;
		position: relative;

		// 头部固定位置
		.titlesHead {
			height: 100rpx;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			color: white;
			display: flex;
			align-items: center;
			background-color: #135a05;
			z-index: 999;

			.icon {
				flex: 1;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.titname {
				flex: 3;
				text-align: center;
			}

			.titRight {
				flex: 1;
			}
		}

		// 头部固定后面占位置的盒子，不要删除哈
		.zhanwei {
			width: 100%;
			height: 100rpx;
			background-color: #135a05;
		}

		// 横向导航栏 navigation
		.navigation {
			width: 100%;
			position: fixed;
			top: 100rpx;
			left: 0;
			padding-top: 30rpx;
			box-sizing: border-box;
			background-color: #135a05;
			color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			z-index: 999;

			.avigrap {
				display: flex;
				align-items: center;
				;

				.iconBox {}

				.red {
					color: #ff060a;
				}
			}
		}

		// 占位置的，
		.zhan {
			width: 100%;
			height: 100rpx;
			background-color: #2C405A;
		}

		//  商品列表
		.init {
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 20rpx;
			background-color: #f4e8ab;

			.page {
				width: 48%;
				height: 409rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				;

				image {
					width: 100%;
					height: 60%;
				}

				.fenwen {
					width: 100%;
					padding: 0 20rpx;
					box-sizing: border-box;
					font-size: 20rpx;

					.shang {
						width: 80%;
						font-weight: 700;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin: 20rpx 0;
					}

					.xia {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.jiage {
							color: red;
						}

						.shangjia {}

					}
				}
			}
		}
	}
</style>
